Xara Webster - Creating a Button Bitmap

This page shows you how to create a bitmap button for a web page using Xara Webster like this :

The step by step instructions show you how to import a button from the Clipart Gallery, change its color and export it as a GIF file.

1. Import the Button

1. Open the Clipart Gallery by choosing Clipart Gallery from the Utilities menu.
2. Scroll down the gallery until you reach the button or image you want to load.
3. Click on the image to select it.
4. Click the Import button at the top of the Clipart Gallery.

2. Choose the Background Color

1. Decide the color of the background behind the button. The buttons are designed for display against a white background but you can easily change this. If you want a white background skip to the next section.
2. Import a suitable shape from the "Simple Shapes - Filled" section of the Clipart Gallery. "Rectangle" is probably the best.
   1. Open the Clipart Gallery by choosing Clipart Gallery from the Utilities menu
   2. Scroll down the gallery until you reach the "Simple Shapes - Filled" section
   3. If you cannot see the clipart in this section, click the folder icon to the left of "Simple Shapes - Filled"
   4. In that section click on Rectangle.web to select it
   5. Click Import at the top of the Clipart Gallery
3. Change the color of the shape to the required background color. A close color match is suitable; it does not have to be exact.
   1. If the Selector Tool is not the current tool, select it.
   2. Click on the rectangle to select it.
   3. Open the Color Editor by choosing Color Editor from the Utilities menu.
   4. Edit the color.
4. Move the background to the back by selecting it and choosing Put to Back from the Utilities menu

3. Change the Color of the Button

1. Open the Color Gallery. The section for your drawing will show one or more colors. One color will be called "Button color", "Button Red" or similar. (The name depends on which button you've imported.) This is the color you want to edit.
2. Click on the color in the Color Gallery to select it.
3. Click the Edit button in the Color Gallery. This opens the Color Editor and displays Button Color ready for editing.
4. Make any required changes. For example, make the button blue.
5. When you have finished changing the color, click "Browser Palette" in the Color Editor. This snaps the color to the nearest color in the Netscape Navigator and Internet Explorer palette. Using colors from this palette always give the best results in Navigator and Explorer.
6. If you wish, you can close the Color Editor and Color Gallery. This gives you more space on the screen.

At this point, you might find it useful to create a bitmap inside Xara Webster of the button to see what it will look like when you create the file. For more details see Creating Bitmaps from Objects.

4. Create the GIF File

1. Select only the button. Make sure the background rectangle (if you used one) isn't selected.
   1. If the Selector Tool is not the current tool, select it.
   2. Click on the button to select it.
2. Open the Export dialog box. (Choose Export from the File menu.)
3. In the Export dialog box choose a suitable filename.
4. In the Export dialog box select Compuserve GIF as the export option.
5. Click "Save". This opens the GIF Export dialog box. This dialog box has a range of options. For more details, see Creating GIF Files
6. You only need to change the Width and Height fields if you want to make GIF image larger or smaller than the original. It's a good idea to make a note of the values because you can use them in the HTML IMG command (see note below).
7. Click "Export" to save the GIF.

• When someone looks at your page using a browser that does not or cannot display pictures, the ALT (alternative) text will be shown on the screen instead of your picture.
• If you include the width and height of the file in the HTML, people looking at your page will not need to download all the images before the page is displayed as the browser already knows what size they are and can display the rest of the page correctly.
• You can enter any values into the WIDTH and HEIGHT entries which makes it very easy to scale and stretch images.